/* 动画库 */
@keyframes bounceIn_y {
0% {
opacity: 0;
-webkit-transform: scale(.5);
-ms-transform: scale(.5);
transform: scale(.5);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
.bounceIn_y {
-webkit-animation-name: bounceIn_y;
animation-name: bounceIn_y;
}
@keyframes bounceOut_y {
0% {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(.5);
-ms-transform: scale(.5);
transform: scale(.5);
}
}
.bounceOut_y {
-webkit-animation-name: bounceOut_y;
animation-name: bounceOut_y;
}
@keyframes bounceInLeft_y {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-30px, 0, 0);
transform: translate3d(-30px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInLeft_y {
-webkit-animation-name: bounceInLeft_y;
animation-name: bounceInLeft_y;
}
@keyframes bounceInRight_y {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(30px, 0, 0);
transform: translate3d(30px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInRight_y {
-webkit-animation-name: bounceInRight_y;
animation-name: bounceInRight_y;
}
@keyframes fadeInLeft_y {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
-ms-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInLeft_y {
-webkit-animation-name: fadeInLeft_y;
animation-name: fadeInLeft_y;
}
@keyframes fadeInRight_y {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInRight_y {
-webkit-animation-name: fadeInRight_y;
animation-name: fadeInRight_y;
}
@keyframes fadeInDown_y {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInDown_y {
-webkit-animation-name: fadeInDown_y;
animation-name: fadeInDown_y;
}
@keyframes fadeOutUp_y {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp_y;
animation-name: fadeOutUp_y;
}
@keyframes fadeInUp_y {
0% {
opacity: 0;
-webkit-transform: translateY(50px);
-ms-transform: translateY(50px);
transform: translateY(50px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInUp_y {
-webkit-animation-name: fadeInUp_y;
animation-name: fadeInUp_y;
}
@keyframes fadeIn_y {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn_y {
-webkit-animation-name: fadeIn_y;
animation-name: fadeIn_y;
}
@keyframes zoomInDown_y {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInDown_y {
-webkit-animation-name: zoomInDown_y;
animation-name: zoomInDown_y;
}
@keyframes rotateIn_y {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateIn_y {
-webkit-animation-name: rotateIn_y;
animation-name: rotateIn_y;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.delay-200 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.animated.delay-400 {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.animated.delay-600 {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.animated.delay-800 {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
/* .animated.delay-1s {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.animated.delay-2s {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.animated.delay-3s {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.animated.delay-4s {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.animated.delay-5s {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.animated.fast {
-webkit-animation-duration: 800ms;
animation-duration: 800ms;
}
.animated.faster {
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
}
.animated.slow {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.slower {
-webkit-animation-duration: 3s;
animation-duration: 3s;
} */
@media (print),
(prefers-reduced-motion: reduce) {
.animated {
-webkit-animation-duration: 1ms !important;
animation-duration: 1ms !important;
-webkit-transition-duration: 1ms !important;
transition-duration: 1ms !important;
-webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important;
}
}